// ---------------------     1. 加载分类数据
let form = layui.form;
$.ajax({
    url: '/my/article/cates',
    success: function (res) {
        // console.log(res);
        if (res.status == 0) {
            let str = '<option value="">请选择文章类别</option>';
            res.data.forEach(function (item, index) {
                str += `
                <option value="${item.Id}">${item.name}</option>
                `;
                $('select').html(str);
                // 有些时候，你的有些表单元素可能是动态插入的。这时 form 模块 的自动化渲染是会对其失效的。
                // 你只需要执行 form.render(type, filter); 方法即可
                // form模块：如果表单元素动态插入，样式不会跟着动态渲染
                // 需要调用layui的form.render()渲染更新方法
                form.render('select');
            });
        }
    }
});


// ----------------------- 2. 富文本编辑器
// tinymce.init({
//     selector: '.layui-textarea',
//     language: 'zh_CN',
//     // 其他配置，需要查文档
// });


// 里面配置：http://tinymce.ax-z.cn/quick-start.php
initEditor();



// --------------------------------- 3. 图片裁剪
// - 调用cropper方法，创建剪裁区
$('#image').cropper({
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
});

//  用有样式的按钮代替原生上传文件按钮
$('.upload-btn').click(function (e) {
    $('#file').click();
});

//  原生按钮选择文件发生改变时 的 事件
$('#file').change(function () {
    // 1. 获取文件对象 得到选的图片的路径  
    // console.log(this.files);
    let obj = this.files[0];

    // 专门方法，把图片对象转为临时的url地址
    let url = URL.createObjectURL(obj);
    // 替换成选的图片 查文档
    $('#image').cropper('replace', url);
});

// --------------------------- 4. 发布

// fd.append() 添加一个信息


let layer = layui.layer;
// 1) 注册提交事件
$('form').submit(function (e) {
    e.preventDefault();

    // 遍历fd对象，检查一下fd对象中是否包括了接口要求的5个参数
    // fd.forEach((value, key) => {
    //     console.log(key, value)
    // })

    // 2) 收集数据：new FormData()   name属性值和接口一致
    let fd = new FormData(this);

    // console.log(fd);  // 一种特定的格式
    // 如何查看已经收到的内容 forEach     
    // 富文本中的内容和图片文件没收集到  插件初始化的部分无法收集，解决，手动添加
    fd.forEach(function (item, index) {
        // console.log(item);
        console.log(index);
    });

    // 手动收集 文本和图片对象，都是插件方法
    // 手动收集富文本框的值
    // formdata 重新：赋值 fd.set()
    // 替换FormData对象里面的content这项，因为 fomdata 收集的 content 为空；
    fd.set('content', tinyMCE.activeEditor.getContent());
    // 收集到 剪裁图片后的canvas对象
    let canvas = $('#image').cropper('getCroppedCanvas', {
        width: 400,
        height: 280
    });
    // 把收集的图片 转成 blob 形式：对象形式
    canvas.toBlob(function (blob) {
        fd.append('cover_img', blob);
        // 3) 把 ajax 请求写在 这里，因为 blob 是回调函数，不然收集不到 blob图片 数据
        $.ajax({
            type: 'post',
            url: '/my/article/add',
            data: fd,
            // ajax 使用 formdata收集数据，需要设置 不编码 、不拼接
            processData: false,
            contentType: false,
            success: function (res) {
                if (res.status == 0) {
                    layer.msg(res.message);
                    // 手动调用回到列表页 点击事件， 模拟对a的点击行为
                    window.parent.document.querySelector('#list').click();
                }
            }
        });
    });

    fd.forEach(function (val, key) {
        // console.log(val);
        console.log(key);
    });


});
